$(function() {
    // 初始化文章类别列表
    // 渲染文章类别列表
    inArtCateList()
        // 渲染
    function inArtCateList() {
        axios({
            method: `get`,
            url: `/my/article/cates`
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                return layui.layer.masg(`获取图书分类失败`)
            }
            let arr = [];
            res.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(`
                    <tr>
                    <td>${ele.Id}</td>
                    <td>${ele.name}</td>
                    <td>${ele.alias}</td>
                    <td>
                        <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs btn-edit">修改</button>
                        <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del">删除</button>
                    </td>
                </tr>
                    `)
                }
            })
            $(`tbody`).empty().html(arr.join(``))
        })
    }
    let indexAdd = 0
        // 点击添加按钮
    $(`#addBtn`).on(`click`, function() {
            indexAdd = layer.open({
                type: 1,
                title: '添加文章分类',
                area: ['500px', '260px'],
                content: `<form id="addForm" class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>`
            });
        })
        // 添加文章分类。要以事件委托的方式绑定动态创建的事件。
        // 提交事件
    $(`body`).on(`submit`, `#addForm`, function(e) {
            e.preventDefault()
                // 提交添加文章分类
            axios({
                method: `post`,
                url: `/my/article/addcates`,
                data: $(this).serialize()
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    layui.layer.msg(res.message)
                }
                layui.layer.msg(`添加文章类别成功`)
                    // 渲染
                inArtCateList()
                    // 关闭指定层（弹出框
                layer.close(indexAdd);
            })
        })
        // 弹出修改的对话框事件委托（动态绑定
    let indexEdit = 0
        // 点击修改按钮
    $(`tbody`).on(`click`, `.btn-edit`, function() {
            indexEdit = layer.open({
                type: 1,
                title: '修改文章分类',
                area: ['500px', '260px'],
                content: `<form lay-filter="editForm" id="editForm" class="layui-form" action="">
            <!-- 隐藏域保存id -->
            <input type="hidden" name="Id">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>`
            });
            // 和弹窗框齐平的位置，获取id删除内容
            // 思路：将id赋给按钮自定义属性然后通过获取按钮的自定义属性获得id
            let id = $(this).attr(`data-id`)

            axios({
                method: `get`,
                //id动态参数（路由参数
                //特点：/不能省略 ：一定要去掉 id是动态变化的
                url: `/my/article/cates/${id}`
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message)
                }
                layui.form.val(`editForm`, res.data)
            })
        })
        // 点击确认按钮
    $(`body`).on(`submit`, `#editForm`, function(e) {
            e.preventDefault()
                // 提交修改文章分类
            axios({
                method: `post`,
                url: `/my/article/updatecate`,
                data: $(this).serialize()
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    layui.layer.msg(res.message)
                }
                layui.layer.msg(`修改文章类别成功`)
                    // 渲染
                inArtCateList()
                    // 关闭指定层（弹出框
                layer.close(indexEdit);
            })
        })
        //点击删除按钮
    $(`tbody`).on(`click`, `.btn-del`, function() {
        let id = $(this).attr(`data-id`)
        layer.confirm('确认删除吗？', { icon: 3, title: `提示` }, function(index) {
            axios({
                method: `get`,
                //id动态参数（路由参数
                //特点：/不能省略 ：一定要去掉 id是动态变化的
                url: `/my/article/deletecate/${id}`
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message)
                }
                layui.layer.msg(`删除成功`)
                    // 渲染
                inArtCateList()
            })
            layer.close(indexDel);
        })
    })
})